<template>
  <el-container>
    <el-header>
      <el-button
        plain
        @click="$router.push({ name: 'addRoutes' })"
      >添加页面</el-button>
      <el-button
        plain
        @click="$router.push({ name: 'room_list' })"
      >你画我猜</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <ul class="router-list">
          <li
            class="router-item"
            v-for="(router, key) in routerList"
            :key="key"
            @click="selectRouter(router, key)"
            :class="{ act: selIndex == key }"
          >
            <span>{{ router.route_name }}</span>
            <!-- <i
              class="el-icon-delete"
              @click.stop="delRouter(router.id)"
            ></i>-->
          </li>
        </ul>
      </el-aside>
      <el-container>
        <!-- <el-header>Header</el-header> -->
        <el-main class="frame-box">
          <iframe
            v-if="frame"
            :src="`../../static/${frame}`"
            frameborder="0"
            width="100%"
            height="100%"
          ></iframe>
        </el-main>
      </el-container>
    </el-container>
    <el-footer style="height:50px;line-height:50px">
      备案号（陕ICP备17010025号-2）/
      <a
        target="_blank"
        href="http://beian.miit.gov.cn"
      >工信部</a>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      routerList: [],
      frame: '',
      selIndex: 0
    }
  },
  mounted () {
    this.getRouterList()
  },
  methods: {
    getRouterList () {
      let that = this
      this.$http.get('/routers/getRouters').then(function (res) {
        that.routerList = res.data
        that.frame = that.routerList[1].route_src
      })
    },
    selectRouter (router, key) {
      this.frame = router.route_src
      this.selIndex = key
    },
    delRouter (id) {
      let that = this
      this.$http.post('/routers/delRouters', { id: id }).then(function (res) {
        that.getRouterList()
        that.$message({
          message: '删除成功!',
          type: 'success'
        })
      })
    }
  }
}
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-container {
  height: 100%;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  line-height: 160px;
  overflow: hidden;
}
.router-item {
  height: 40px;
  line-height: 40px;
  background-color: #ecf5ff;
  border-bottom: 1px solid #409eff;
  cursor: pointer;
}
.router-item:hover,
.router-item.act {
  background-color: #d9ecff;
}
</style>
